import styled from 'styled-components'

export const SearchinputStyle = styled.div `
  .container1 {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 10vh;
    display: flex;
    z-index: 3;
    background-color: #ff6600;
    /* background-color: #ffffff; */
    .iconfont {
      
      margin-top: 3.5vh;
      margin-left: 20px;

      & img{
        width: 45px;
        height: 45px;
      }
    }
    .search-input {
      width: 220px;
      height: 45px; 
      background-color: #fff;
      border-radius: 30px;
      display: flex;
      margin-top: 3.5vh;
      margin-left: 20px;  
      .search-border {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px;
        & img {
          width: 15px;
          height: 15px;
        }
      }
      & input {
          border: none;
          width: 100px;
          font-size: 15px;
          background-color: #fff;
      }
    }
    .box{
      background-color: #ffffff;
    }
  }

  .container2 {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 10vh;
    /* display: flex; */
    flex: 1;
    z-index: 3;
    background-color: #ffffff;
    .iconfont {
      margin-top: 3.5vh;
      margin-left: 20px;
      display: none;
      & img{
        width: 45px;
        height: 45px;
      }
    }
    
    .search-input {
      /* width: 220px; */
      height: 45px; 
      width: 280px;
      background-color: #f6f6f6;
      border-radius: 30px;
      display: flex;
      margin-top: 3.5vh;
      margin-right: 85px;
      float: right;   // 浮动使其固定在右边，左边伸长
      transition: width 0.5s;  // transition 监听宽度的变化，使其有一个缓慢的变化效果
      .search-border {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px;
        & img {
          width: 15px;
          height: 15px;
        }
      }
      & input {
          border: none;
          width: 100px;
          font-size: 15px;
          background-color: #f6f6f6;
      }
    }
    .box{
      background-color: #ffffff;
    }
    }
`






 


